<template>
	<div class="">
		<div class="header">
			<span>微聊</span>
			<i class="el-icon-close" @click="exit"></i>
		</div>
		<img src="../assets/image/logo.png" alt=""/>
		<div class="form">
			<el-input v-model="username" placeholder="请输入账号"></el-input>
			<el-input v-model="password" placeholder="请输入密码"></el-input>
			<el-checkbox v-model="rememberMe">下次直接登录</el-checkbox>
			<el-button class="login" plain @click="login">登录</el-button>
		</div>
		<div class="fotter">
			<el-button type="text" @click="register">注册账号</el-button>
			<el-button type="text" @click="findPasswrod">忘记密码</el-button>
			<el-button type="text">扫码登录</el-button>
		</div>
	</div>
</template>

<script>
	import request from "../api/request";

	const {ipcRenderer} = window.require("electron");

	export default {
		name: "login",
		props: {},
		components: {},
		data() {
			return {
				username: "userA@qq.com",
				password: "123",
				rememberMe: false,
			};
		},
		computed: {},
		watch: {},
		created() {
		},
		mounted() {
		},
		methods: {
			exit() {
				console.log("click");
			},
			login() {
				const self = this;
				request
						.post("api/login", {username: this.username, password: this.password})
						.then(function (res) {
							if (res.data.success) {
								self.$store.commit("addToken", res.data.token);
								self.$store.commit("addInfo", res.data.info);
								self.$ipcInvoke("changeWH");
								// 建立websocket连接
								self.$ipcInvoke("connectWs", self.$store.state.info.id);
								self.$router.push("/index");
							} else {
								// alert("用户名或密码错误");
								new Notification("通知", {body: "用户名或密码错误"})
							}
						});
			},
			register() {
				this.$ipcInvoke("createRegisterWin");
			},
			findPasswrod(){}

		},
	};
</script>
<style scoped>
	.header {
		position: relative;
	}

	.header span {
		color: #919191;
	}

	.header i {
		size: 14px;
		top: 0;
		right: 10px;
		position: absolute;
	}

	.header i:hover {
		cursor: pointer;
		color: #07c160;
	}

	img {
		display: block;
		margin: 0 auto;
		width: 120px;
		padding-top: 50px;
	}

	.form {
		margin-top: 65px;
		text-align: center;
	}

	.el-input {
		margin-bottom: 20px;
		width: 300px;
	}

	.login {
		width: 300px;
		background: #07c160;
	}

	.form .login:hover {
		background: #07c160;
		border-color: #07c160;
		color: white;
	}

	.el-checkbox {
		float: left;
		margin-left: 20px;
		margin-bottom: 10px;
		font-size: 12px;
	}

	.fotter {
		text-align: center;
	}

	.fotter .el-button {
		color: #07c160;
		font-size: 12px;
	}
</style>
